<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfelo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script>

function displayTitlePanel()
{
	var panel;
	panel = document.getElementById('titlePanel');
	panel.style.display = "block";
}

function hideTitlePanel()
{
	var panel;
	panel = document.getElementById('titlePanel');
	panel.style.display = "none";
}


//click outside this div will make this window go away
var mouse_is_inside = false;
$(document).ready(function()
{
    $('#titlePanel').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('#titlePanel').hide();
    });
});


$(window).load(function() {
	var theImage = $('ul li img');
	var theWidth = theImage.width(); //3200	
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
		
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});
//	
//	$.load("Control?name=John", function(data) {
//		setProfileName(data.name)
//	});
//	
	
	
	$(document).keydown(function(e){
		var currentMargin = document.getElementById("imageList").style.marginLeft;
    	var numMargin = parseFloat(currentMargin);
    	if (isNaN(numMargin))
    		{
    			numMargin = 0;
    		}
    	var rightMargin = numMargin - 800;
    	var leftMargin = numMargin + 800; 
    	var rightstrMargin = rightMargin + 'px';
    	var leftstrMargin = leftMargin + 'px';
		var keyCode = e.keyCode || e.which;
	    if (keyCode == 38) 
	    { 
	       alert( "Up arrow key hit." );
	       return;
	    }
	    if (keyCode == 40) 
	    { 
	    	alert("down arrow key"); 
			return;
	    }
	    if (keyCode == 37) 
	    { 
	    	if(numMargin != 0)
	    	{
	    		if(leftMargin%800 == 0)
	    		{
	    			$("#imageList").animate({
	    				"margin-left": (leftstrMargin)			
	    			}, 1000);
	    		}
	    	
	    	}
	    }
	    if (keyCode == 39) 
	    { 
	    	if(numMargin != -2400)
	    	{
	    		if(rightMargin%800 == 0)
	    		{
	    			$("#imageList").animate({
	    				"margin-left": (rightstrMargin)			
	    			}, 1000);	
	    		}
	    	}
	    }  	
	});
	
	
	
	$(theImage).each(		
		function(intIndex){				
				$(this).nextAll('a')
				.bind("click", function()
						{
					if($(this).is(".next") )	{
						$(this).parent('li').parent('ul').animate({
							"margin-left": (-(intIndex + 1) * theWidth)				
						}, 1000)			
						} 
					else if($(this).is(".previous")){
					
						$(this).parent('li').parent('ul').animate({
							"margin-left": (-(intIndex - 1) * theWidth)				
						}, 1000)	
					}
					else if($(this).is(".startover")){
						
						$(this).parent('li').parent('ul').animate({
							"margin-left": (0)				
						}, 1000)
					}
				});									 
	});	 					
});

   </script>

<style>
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index:-1;
}


body {
background-color:black;
color:white;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


ul {
float:center;
}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}


div.topRightToolbar {
    font-family:Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
    width:30%;
	color:white;
    background: rgb(10,10,10);
    filter:alpha(opacity=90);
    right:0%;
	top: 1%;
    position:absolute;
    text-align: left;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}


div#titlePanelOnBottom
{
font-family: Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
	color: white;
	width:14.5%;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=70);
	left: 2%;
	top: 80%;
	position: absolute;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom: 10px;
}


div#titlePanel {
	font-family: Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
	color: white;
	font-size:40px;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=70);
	width:62%;
	height:71%;
	left: 21.6%;
	top: 11.2%;
	position: absolute;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom: 10px;
	display:none;
}

div.leftSideBar{
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif";
	color: white;
	font-size: 24px;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=70);
	left: 2%;
	top: 6%;
	width:14.5%;
	height:320px;
	position: absolute;
	text-align: center;
	padding-top:10px;
	padding-bottom: 10px;
}


ol {
	list-style-type: none;
	margin:1px 5px 10px 1px;
	text-decoration: none; 
	color: white; 
}

a{
text-decoration:none; 
color:white;
}

}
</style>
</head>
<body>


<ul id="imageList">
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba1.jpg" width = "800" height = "600" /><a class="next" id="currentlyDisplayed" href="#">next</a></li>
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba2.jpg" width = "800" height = "600" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba3.jpg" width = "800" height = "600" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba4.jpg" width = "800" height = "600" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>


<div class="topRightToolbar">

        <!--Search Bar, with placeholder text "Search" -->
        <input id="searchBar" type="search" placeholder="search"/>
        
        <!-- Current User's name> -->
        <a id="CurrentUserID" href="#" >Username</a>
        <!-- Script, so that we can update the current user's name according to the controller -->

        <!--Settings icon and link-->
        <a id="settings" href="external"><img src="C:\Users\Hansol\workspace\Portfelohtml\asterisk_orange.png"/></a>
        <!-- Script for the settings link if needed -->

    </div>


<div class="leftSideBar">
<img src="C:\Users\Hansol\workspace\Portfelohtml\profilepic.png" alt="Jessica" width ="120" height = "120">

<ol>
<li><a href="#" rel="external">Name</a></li>
<li><a href="#" rel="external">Location</a></li>
<li><a href="#" rel="external">Connections</a></li>
<li><a href="#" rel="external">About</a></li>
<li><a href="#" rel="external">Photos</a></li>
<li><a href="#" rel="external">Message</a></li>
<li><a href="#" rel="external">Share</a></li>
<li><a href="#" rel="external">CurrentAlbum</a></li>
</ol>
</div>



<div id="titlePanelOnBottom" onclick = "displayTitlePanel()" >
<a href="#" rel="external">Sample Image</a>
</div>


<div id="titlePanel">
<a href="#" rel="external">Sample Image</a>
<br>
<a href="#" rel="external">Sample Detail</a>
</div>




</body>
</html>